<template>
  <div class="container">
    <h1 class="loginTitle"><a @click="backHome()"
         style="color: #666;">Jason 的博客</a></h1>
    <div class="loginInfo">
      <div class="loginBox">
        <div class="title">
          <h1 style="color: #666;">登录</h1>
          <p style="text-align: right;"
             class="register">新用户<a @click="skipRegister()">注册</a></p>
        </div>
        <div v-show="loginInfoError">
          <Icon type="ios-close-circle-outline" />
          <div class="error-alert-content">
            <span class="error-alert">用户名或密码错误</span>
          </div>
        </div>
        <Input v-model="email"
               type="email"
               placeholder="邮箱"
               style="width: 300px" />
        <div v-show="emailInfoError">
          <Icon type="ios-close-circle-outline" />
          <div class="email-error-alert-content">
            <span class="email-error-alert">请输入邮箱</span>
          </div>
        </div>
        <Input v-model="password"
               type="password"
               placeholder="密码:6-12位英文、数字、下划线"
               style="width: 300px" />
        <div v-show="passwordInfoError">
          <Icon type="ios-close-circle-outline" />
          <div class="pwd-error-alert-content">
            <span class="pwd-error-alert">请输入密码</span>
          </div>
        </div>
        <h3 class="forgetPassword"><a href="">忘记密码？</a></h3>
        <Button class="login-button"
                type="primary"
                @click="login()"
                long>登录</Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      email: "",
      password: "",
      loginInfoError: false,
      emailInfoError: false,
      passwordInfoError: false
    };
  },
  methods: {
    backHome() {
      this.$router.push({ path: "/" });
    },
    skipRegister() {
      this.$router.push({ path: "/register" });
    },
    login() {
      const loginInfo = [
        {
          email: this.email,
          password: this.password
        }
      ];
      this.$store
        .dispatch("UserLogin", loginInfo)
        .then(() => {
          this.$router.push({ path: "/" });
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style scoped>
.forgetPassword {
  text-align: right;
  margin: 20px auto;
}
.register {
  line-height: 36px;
  position: absolute;
  top: 0;
  right: 0;
}
.title {
  position: relative;
}
.loginBox {
  padding-bottom: 0;
  padding: 40px;
  background-color: white;
}
.loginBox div {
  margin-top: 20px;
}
.loginInfo {
  margin-top: 25px;
}
.loginTitle {
  margin-top: 50px;
  text-align: center;
}
.container {
  width: 380px;
  height: 400px;
  margin: 0 auto;
}
</style>